<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="../common/base_body_header.jsp" %>
<%@include file="../common/navbar.jsp" %>
<%@include file="../common/page_content_pre.jsp" %>

<link href="${GLOBAL.staticJsPath}/wangEditor/wangEditor.min.css" rel="stylesheet" type="text/css">

<div class="page-content">
    <div class="row">
        <div class="col-sm-12">
            <div class="widget-box">
                <div class="widget-header">
                    <h4>${not empty newsContent.newsId?'修改':'添加'}新闻</h4>
                </div>
                <input type="hidden" id="storeUrl" value="${storeUrl}"/>

                <div class="widget-body">
                    <div class="widget-main no-padding">
                        <form:form class="form-horizontal" modelAttribute="newsContent" enctype="multipart/form-data"
                                   action="${GLOBAL.basePath}/newsContent/save" method="post" id="newsContentForm">
                            <form:hidden path="newsId"/>
                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-1 control-label">标题：</label>

                                    <div class="col-sm-4">
                                        <form:input path="title" htmlEscape="false" maxlength="50"
                                                    class="input-xlarge required" placeholder="请输入标题"/>
                                        <span class="help-inline"><font color="red">*</font> </span>
                                    </div>
                                </div>
                            </fieldset>

                            <fieldset>
                                <div class="form-group" width="800px">
                                    <label class="col-sm-1 control-label">内容：</label>

                                    <div class="col-sm-10">
                                        <textarea id="editor-trigger" rows="25"
                                                  name="content">${newsContent.content}</textarea>
                                    </div>
                                </div>
                            </fieldset>

                            <div class="form-actions center">
                                <button type="button" class="btn btn-sm btn-grey" id="go_back_btn">
                                    返回
                                    <i class="icon-reply icon-on-right bigger-110"></i>
                                </button>
                                <shiro:hasPermission name='newsContent:edit'>
                                    <button type="submit" class="btn btn-sm btn-success" id="save_btn">
                                        保存
                                        <i class="icon-save icon-on-right bigger-110"></i>
                                    </button>
                                </shiro:hasPermission>
                            </div>
                        </form:form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<%@include file="../common/page_content_suf.jsp" %>
<%@include file="../common/script.jsp" %>

<script type="text/javascript" src="${GLOBAL.staticJsPath}/assets/qiniu/plupload.full.min.js"></script>
<script type="text/javascript" src="${GLOBAL.staticJsPath}/assets/qiniu/moxie.min.js"></script>
<script type="text/javascript" src="${GLOBAL.staticJsPath}/assets/qiniu/qiniu.min.js"></script>

<script type="text/javascript" src="${GLOBAL.staticJsPath}/wangEditor/wangEditor.js"></script>

<script type="text/javascript">
    //展览下拉选项
    ART.mLoadSelectOption("${GLOBAL.basePath}/order/exhibitionList", {}, $("#s_pItemKey"), "id", "title", true);

    $(document).ready(function () {
        $("#go_back_btn").on("click", function () {
            goBack();
        });

        $("#newsContentForm").validate({
            rules: {
            },
            messages: {
                mobile: {required: "用户登录名不能为空", remote: jQuery.format("用户登录名已存在")},
                confirmNewPassword: {equalTo: "输入与上面相同的密码"}
            }
        });

        $("#save_btn").on("click", function () {
            saveBtn();
        });
    });

    function goBack() {
        document.location.href = "${GLOBAL.basePath}/newsContent/list";
    }

    function saveBtn(){
        $("#newsContentForm").submit();
    }

    var editor = new wangEditor('editor-trigger');
    // 上传图片
    editor.config.customUpload = true;  // 设置自定义上传的开关
    editor.config.customUploadInit = uploadInit;  // 配置自定义上传初始化事件，uploadInit方法在上面定义了
    editor.create();

    var qiniuDomain = '${GLOBAL.basePath}';

    function uploadInit() {
        // this 即 editor 对象
        var editor = this;
        // 触发选择文件的按钮的id
        var btnId = editor.customUploadBtnId;
        // 触发选择文件的按钮的父容器的id
        var containerId = editor.customUploadContainerId;

        // 创建上传对象
        var uploader = Qiniu.uploader({
            runtimes: 'html5,flash,html4',    //上传模式,依次退化
            browse_button: btnId,       //上传选择的点选按钮，**必需**
            uptoken_url: qiniuDomain+"/qiniu/token",
            domain: 'bs-pro',
            container: containerId,           //上传区域DOM ID，默认是browser_button的父元素，
            max_file_size: '20mb',           //最大文件体积限制
            flash_swf_url: 'path/of/plupload/Moxie.swf',  //引入 flash,相对路径
            filters: {
                mime_types: [
                    //只允许上传图片文件 （注意，extensions中，逗号后面不要加空格）
                    { title: "图片文件", extensions: "jpg,gif,png,bmp" }
                ]
            },
            max_retries: 3,                   //上传失败最大重试次数
            dragdrop: true,                   //开启可拖曳上传
            drop_element: 'editor-container',        //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
            chunk_size: '4mb',                //分块上传时，每片的体积
            auto_start: true,                 //选择文件后自动上传，若关闭需要自己绑定事件触发上传
            init: {
                'FilesAdded': function(up, files) {
                    plupload.each(files, function(file) {
                        // 文件添加进队列后,处理相关的事情
                    });
                },
                'BeforeUpload': function(up, file) {
                    // 每个文件上传前,处理相关的事情
                },
                'UploadProgress': function(up, file) {
                    // 显示进度条
                    editor.showUploadProgress(file.percent);
                },
                'FileUploaded': function(up, file, info) {
                    var domain = up.getOption('domain');
                    var res = $.parseJSON(info);
                    var sourceLink = res.key; //获取上传成功后的文件的Url

                    // 插入图片到editor
                    editor.command(null, 'insertHtml', '<img src="http://qiniu.bieshuwang.com/' + sourceLink + '" style="max-width:100%;"/>')
                },
                'Error': function(up, err, errTip) {
                    //上传出错时,处理相关的事情
                },
                'UploadComplete': function() {
                    //队列文件处理完毕后,处理相关的事情

                    // 隐藏进度条
                    editor.hideUploadProgress();
                }
            }
        });
    }
</script>
